<template>
	<view class="content">
		<view class="header">
			<view class="item " :class="pagination.group=='day'?'active':''" data-type="day" @click="changeList('day')">
				<view class="text">
					每天
				</view>
				<view class="hr">
				</view>
			</view>
			<view class="item" data-type="month" :class="pagination.group=='month'?'active':''"
				@click="changeList('month')">
				<view class="text">
					每月
				</view>
				<view class="hr">
				</view>
			</view>
			<view class="openPicker" @click="dateShow=true">
				<u-icon name="calendar-fill"></u-icon>
			</view>
		</view>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<view class="walletList con" v-for="(item,i) in list" :key="i">
				<view class="walletT">
					<view class="l">
						{{item.date}}
					</view>
				</view>
				<view class="walletD">
					<view class="li">
						<view class="h3">
							预估收益
						</view>
						<view class="p">
							{{item.estimate_income}}
						</view>
					</view>
					<view class="li">
						<view class="h3">
							预估积分
						</view>
						<view class="p">
							{{item.estimate_integral}}
						</view>
					</view>
					<view class="li">
						<view class="h3">
							预估活动奖励
						</view>
						<view class="p">
							{{item.estimate_activity_income}}
						</view>
					</view>
					<view class="li">

					</view>
					<view class="li">
						<view class="h3">
							总粉丝新增
						</view>
						<view class="p">
							{{item.user_number}}
						</view>
					</view>
					<view class="li">
						<view class="h3">
							激活粉丝新增
						</view>
						<view class="p">
							{{item.activate_user_number}}
						</view>
					</view>
				</view>

			</view>
		</mescroll-body>
		<u-picker :value="dateShow" mode="time" :mask-close-able="false" :params="params" :default-time="time1"
			@confirm="timeConfirm" @cancel="playCancel"> </u-picker>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				dateShow: false,
				time1: '',
				mode: 'date',
				// year-month
				pagination: {
					current: 1,
					page: 1,
					pageSize: 20,
					date: '',
					group: 'day'
				},
				list: []
			}
		},
		created() {
			this.getDate()
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			console.log('下拉加载')
		},
		methods: {
			getList() {
				let that = this;
				let params = that.pagination

				params.page = that.pagination.current;
				params.page_size = 20
				this.$u.api.userCount(params).then(res => {
					console.log(res)
					if (!res.list) {
						res.list = []
					}
					if (!res.pagination) {
						res.pagination = {}
						res.pagination.total = 0
					}
					that.mescroll.endByPage(res.list.length, res.pagination.total)
					that.pagination.page = that.pagination.current
					if (that.pagination.current * 1 == 1) {
						that.list = res.list
					} else {
						that.list = [...that.list, ...res.list]
					}
					res.pagination.group = that.pagination.group
					that.pagination = res.pagination;
					that.pagination.current = that.pagination.current * 1 + 1
					that.pagination.page = that.pagination.current * 1 + 1
				})
			},

			changeList(e) {
				this.pagination.group = e;
				this.getDate()
				this.pagination.page = 1;
				this.pagination.current = 1;
				this.list = []
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0)
				this.mescroll.setPageNum(1)
			},
			upCallback() {
				this.getList()
			},
			downCallback() {
				this.pagination.page = 1;
				this.pagination.current = 1;
				this.mescroll.resetUpScroll();
			},
			showCalendar() {
				this.showCalendarStatus = true
			},
			mescrollInit() {
				console.log(111)
			},

			getDate() {
				var date = new Date();
				var year = date.getFullYear(); //年
				var month = date.getMonth() + 1; //月
				var day = date.getDate(); //日
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				if (this.pagination.group == 'day') {
					this.time1 = year + '-' + month + '-' + day;
					this.params.day = true
				} else {
					this.params.day = false
					this.time1 = year + '-' + month
				}
			},
			// 日期确认
			timeConfirm(e) {
				this.dateShow = false
				console.log(e)
				if (this.pagination.group == 'day') {
					this.time1 = e.year + '-' + e.month + '-' + e.day;
					this.pagination.date = e.year + '-' + e.month + '-' + e.day;
				} else {
					this.time1 = e.year + '-' + e.month;
					this.pagination.date =  e.year + '-' + e.month;
				}
				this.pagination.page = 1;
				this.pagination.current = 1;
				this.list = []
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0)
				this.mescroll.setPageNum(1)
			},
			playCancel(){
				this.dateShow = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.con {
		padding: 0 32rpx;
	}

	.content {
		height: 100vh;
		background-color: #F4F4F5;
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		height: 80rpx;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: 0 0 10rpx 10rpx #F4F4F5;
		border-bottom: 1px solid #F4F4F5;

		&.active {}

		.openPicker {
			height: 80rpx;
			padding: 0 30rpx;
			position: absolute;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			top: 0;

			u-icon {
				font-size: 40rpx;
				color: #ec6a38;
			}
		}

		.item {
			width: 200rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			color: #bbbbbb;

			.hr {
				width: 70rpx;
				height: 6rpx;
				background-color: #bbbbbb;
				margin-top: 10rpx;
			}

			&.active {
				color: #ef6d3c;

				.hr {
					background-color: #ef6d3c;
				}
			}
		}
	}

	.walletMainList {
		display: flex;
		flex-wrap: wrap;

		.li {
			padding: 20rpx 0;
			width: 50%;
			text-align: center;
			// border-bottom: 1px solid rgba(0,0,0,0.1);
		}

		.h3 {
			font-size: 30rpx;
			color: #000;
		}

		.p {
			font-size: 26rpx;
			margin-bottom: 10rpx;
		}
	}

	.walletList {
		margin: 20rpx 0;
		background-color: #fff;
	}

	.walletT {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		height: 80rpx;
		border-bottom: 1px solid #F4F4F5;

		.l {
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.walletT .r {
		color: #fb5e4d;
		font-size: 28rpx;
	}

	.hr {
		height: 20rpx;
		background-color: #F4F4F5;
	}

	.walletD {
		padding: 20rpx 0;
		padding-bottom: 0;
		display: flex;
		flex-wrap: wrap;
		background-color: #fff;

		.li {
			width: 50%;
			margin-bottom: 20rpx;
		}

		.h3 {
			font-size: 30rpx;
			color: #b3b3b3;
			margin-bottom: 10rpx;
		}

		.p {
			font-size: 28rpx;
			color: #ea4e25;
			font-weight: bold;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.changeDate .item {
		height: 50px;
		align-items: center;
		line-height: 50px;
		justify-content: center;
		text-align: center;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.changeDate {
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 10px 10px #dedede;
		z-index: 9;
	}

	.changeDateT {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;
		align-items: center;
		height: 50px;
		line-height: 50px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);

		.span {
			color: #999;
		}

		.btn {
			font-size: 30rpx;
			color: #000;
		}
	}

	mescroll-body {
		margin-top: 80rpx;
		display: block;
	}
</style>
